<template>
    <div>
        <el-form :inline="true" :model="searchData" class="demo-form-inline">
            <el-form-item label="订单状态">
                <el-select v-model="searchData.searchType">
                    <el-option label="已完成" value="4"></el-option>
                    <el-option label="未支付" value="1"></el-option>
                    <el-option label="已支付" value="2"></el-option>
                    <el-option label="已取消" value="3"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="用户">
                <el-input v-model="searchData.name"></el-input>
            </el-form-item>
            <!-- <el-form-item label="订单编号">
                <el-input v-model="searchData._id"></el-input>
            </el-form-item> -->
            <el-form-item label="下单时间">
                <el-input v-model="searchData.startTime"></el-input>
            </el-form-item>
            <el-form-item label="车位位置">
                <el-input v-model="searchData.address"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button
                    type="primary"
                    @click="mySearchOrders"
                    icon="el-icon-search"
                    >查询</el-button
                >
            </el-form-item>
        </el-form>
        <el-table
            :data="ordersData.filter((item) => !item.delete)"
            style="width: 100%"
            border
        >
            <el-table-column type="index" label="序号" width="80px">
            </el-table-column>
            <el-table-column prop="_id" label="订单编号"></el-table-column>
            <el-table-column label="用户">
                <template slot-scope="scope">
                    <el-popover trigger="hover" placement="top">
                        <p>姓名: {{ scope.row.tenantsId.name }}</p>
                        <p>电话: {{ scope.row.tenantsId.phone }}</p>
                        <p>信用值：{{ scope.row.tenantsId.credits }}</p>
                        <div slot="reference" class="name-wrapper">
                            <el-tag size="medium">{{
                                scope.row.tenantsId.name
                            }}</el-tag>
                        </div>
                    </el-popover>
                </template>
            </el-table-column>
            <el-table-column label="预定车位位置">
                <template slot-scope="scope">
                    <el-popover trigger="hover" placement="top">
                        <p>地址: {{ scope.row.parkingsId.address }}</p>
                        <p>车牌: {{ scope.row.parkingsId.number }}</p>
                        <p>产权信息：{{ scope.row.parkingsId.property }}</p>
                        <p>出租周期：{{ scope.row.parkingsId.cycle }}</p>
                        <p>价格：{{ scope.row.parkingsId.price }}</p>
                        <p>
                            出租方：{{ scope.row.parkingsId.lessorsId.account }}
                        </p>
                        <div slot="reference" class="name-wrapper">
                            <el-tag size="medium">{{
                                scope.row.parkingsId.address
                            }}</el-tag>
                        </div>
                    </el-popover>
                </template>
            </el-table-column>
            <el-table-column
                prop="startTime"
                label="订单生成日期"
            ></el-table-column>
            <el-table-column
                prop="endTime"
                label="订单完成日期"
            ></el-table-column>
            <el-table-column label="订单状态">
                <template slot-scope="scope">
                    <span v-if="scope.row.state == 1">未支付</span>
                    <span v-else-if="scope.row.state == 2">已支付</span>
                    <span v-else-if="scope.row.state == 3">已取消</span>
                    <span v-else-if="scope.row.state == 4">已完成</span>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope"
                    ><el-button
                        @click="deleteOrders(scope.row._id)"
                        type="danger"
                        >删除</el-button
                    ></template
                >
            </el-table-column>
        </el-table>
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[1, 3, 5, 7]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
        >
        </el-pagination>
    </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const {
    mapActions: ordersMapActions,
    mapState: ordersMapState,
    mapMutations: ordersMapMutations,
} = createNamespacedHelpers("orders");
export default {
    mounted() {
        this.getOrders();
    },
    watch: {
        pageSize() {
            this.getOrders();
        },
        currentPage() {
            this.getOrders();
        },
    },
    computed: {
        ...ordersMapState([
            "ordersData",
            "total",
            "currentPage",
            "pageSize",
            "searchData",
        ]),
    },
    methods: {
        handleSizeChange(val) {
            this.changePageSize(val);
        },
        handleCurrentChange(val) {
            this.changeCurrentPage(val);
        },
        ...ordersMapActions(["getOrders", "deleteOrders"]),
        ...ordersMapMutations([
            "searchOrders",
            "changePageSize",
            "changeCurrentPage",
        ]),
        mySearchOrders() {
            this.searchOrders(this.searchData);
            this.getOrders();
        },
    },
};
</script>

<style lang="scss">
.el-table {
    box-sizing: border-box;
    td,
    th {
        text-align: center;
    }
}
</style>